<template>
    <el-container style="background: white">
      <el-header height="100px">
        <el-container>
          <el-aside width="550px">
            <img src="../../public/达达旅游网.png" style="margin: 30px 30px 40px 300px;height: 40px;width: 200px">
          </el-aside>
          <el-main>可变</el-main>
          <el-aside width="420px" >
            <div style="float:left;width: 30px;" >
              <el-icon size="30px" style="height: 80px"><PhoneFilled /></el-icon>
            </div>
            <div style="font-family: Verdana;float:right;padding-right: 270px;margin-top: 20px" >
              客服联系电话:<br>400-888-8888
            </div>
          </el-aside>
        </el-container>
      </el-header>
      <el-main>
        <el-menu mode="horizontal" background-color="#10b286"
                 text-color="#fff" active-text-color="#ff0"
                 @select="handleSelect" class="custom-menu">
          <el-menu-item index="1" style="margin-right: 40px ">首页</el-menu-item>
          <el-menu-item index="2" style="margin-right: 40px ">出境游</el-menu-item>
          <el-menu-item index="3" style="margin-right: 40px ">国内游</el-menu-item>
          <el-menu-item index="4" style="margin-right: 40px ">机票</el-menu-item>
          <el-menu-item index="5" style="margin-right: 40px ">酒店</el-menu-item>
          <el-menu-item index="6" style="margin-right: 40px ">驴友空间</el-menu-item>
          <el-menu-item index="7" style="margin-right: 40px ">个人中心</el-menu-item>
        </el-menu>
      </el-main>
      <el-footer>可变</el-footer>
    </el-container>
</template>
<script setup>
//index指的是用户选择的是哪个菜单项,对应菜单项index的值,比如 3表示选择了"直播课"
//indexPath指的是如何到达当前这个菜单项,比如[6,6-2]可到达"JSDTN2406"
const handleSelect = (index, indexPath) => {
  console.log(index, indexPath);
}
</script>

<style scoped>
.custom-menu {
  display: flex;
  justify-content: center;
}
</style>